<script setup>
  const defaultsA = { VMenu: { attach: document.body } }
  const defaultsB = { VMenu: { attach: document.getElementById('app') } }
</script>

<template>
  <v-menu location="right">
    <template #activator="{ props }">
      <v-btn v-bind="props" class="ma-5">Menu</v-btn>
    </template>
    <v-list>
      <v-list-item title="Menu item" />
      <v-list-item title="Menu item" />
    </v-list>
  </v-menu>

  <v-defaults-provider :defaults="defaultsA">
    <v-defaults-provider :defaults="defaultsB">
      <v-menu location="right">
        <template #activator="{ props }">
          <v-btn v-bind="props" class="ma-5">Menu with defaults provider</v-btn>
        </template>
        <v-list>
          <v-list-item title="Menu item" />
          <v-list-item title="Menu item" />
        </v-list>
      </v-menu>
    </v-defaults-provider>
  </v-defaults-provider>
</template>